.filterActive {
  display: inline-block;
  padding-left: 1rem;
  padding-right: 1rem;
  color: #ffffff;
  font-weight: 600;
  border-radius: .5rem;
  background: linear-gradient(150deg, hsla(0, 0%, 8%, .4) 10%, hsla(0, 0%, 45%, .15) 80%);
  box-shadow: 1px 1px 2px 0 hsla(0, 0%, 82%, .4), -1px -1px 2px rgba(0, 0, 0, .4), inset 3px 3px 2px 0 rgba(0, 0, 0, .4), inset -1px -2px 2px hsla(0, 0%, 82%, .4);
}

.filterButton {
  padding-left: 1rem;
  padding-right: 1rem;
  font-weight: 600;
  border-radius: .5rem;
  display: inline-block;
  color: #fff;
  background: linear-gradient(145deg, hsla(240, 2%, 40%, .15) 15%, rgba(33, 33, 33, .4) 80%);
  box-shadow: -4px -3px 2px 0 hsla(0, 0%, 98%, .13), 4px 4px 2px 0 rgba(0, 0, 0, .4);
}


.box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: center;
  justify-content: center;
  grid-gap: 50px;
}


@media screen  and (min-width: 996px)  and (max-width: 1400px) {
  .box {
    grid-template-columns: 1fr 1fr 1fr ;
  }
}


@media screen and (min-width: 678px) and (max-width: 995px) {
  .box {
    grid-template-columns: 1fr 1fr;
  }
}


@media screen and (max-width: 677px)  {
  .box {
    grid-template-columns: 1fr ;
  }
}



.css-x0b00d {
    margin-left: 1rem;
    margin-right: 1rem;
}


.swip{
  margin-left: 3vw;
  margin-right: 3vw;
}




@media screen  and (min-width: 1600px)  and (max-width: 1778px) {
  .swip{
    margin-left: 1.8vw;
    margin-right: 1.8vw;
  }
}

@media screen  and (min-width: 1437px)  and (max-width: 1599px) {
  .swip{
    margin-left: 1.5vw;
    margin-right: 1.5vw;
  }
}


@media screen  and (min-width: 1401px)  and (max-width: 1436px) {
  .swip{
    margin-left: 0.5vw;
    margin-right: 0.5vw;
  }
}

@media screen  and (min-width: 1100px)  and (max-width: 1235px) {
  .swip{
    margin-left: 1vw;
    margin-right: 1vw;
  }
}


@media screen  and (min-width: 996px)  and (max-width: 1099px) {
  .swip{
    margin-left: -1vw;
    margin-right: -1vw;
  }
}